<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import Type from '@components/search/type';
import Search from '@components/search/index';
import PageWrapper from '@components/PageWrapper.vue';
import { common, service } from '@utils';
import { usePremission } from '@hooks';
import { useRouter } from 'vue-router';
import AccountCom from './Account';
import Apply from './Apply';

const router = useRouter();

const premission = usePremission({
    apply: 'wealth:accountFundWithdraw:save',
});

const searchs = ref([
    {
        type: Type.DATE_RANGE,
        width: 7,
    },
    // {
    //     type: Type.SELECT,
    //     key: 'bizTypeCode',
    //     width: 5,
    //     labelKey: 'text',
    //     valueKey: 'code',
    //     placeholder: '流水类型'
    // },
    {
        type: Type.INPUT,
        key: 'balanceNo',
        width: 5,
        placeholder: '流水号',
    },
    {
        type: Type.INPUT,
        key: 'orderId',
        width: 5,
        placeholder: '订单编号',
    },
    // {
    //     type: Type.INPUT,
    //     key: 'orderUserName',
    //     width: 5,
    //     placeholder: '对用用户'
    // },
    {
        width: 6,
        type: Type.SEARCH_EXPORT_BUTTON,
    },
]);

const pageRef = ref();
const tableRef = ref();
const accountRef = ref();
const applyRef = ref();
const fund = ref({});
const account = ref();
const balanceTypeDesc = reactive([0,'流入','流出','冻结','解冻'])
let queryForm = {};

const getAccount = async () => {
    const res = await service.fund.withdrawAccount();
    account.value = res;
};

const onSearch = param => {
    queryForm = param;
    pageRef.value.refresh();
};

const getData = async ({ pageNum, pageSize }, cb) => {
    const param = { ...queryForm };
    if (param.time && param.time.length > 0) {
        param.startCreateTime = param.time[0];
        param.endCreateTime = param.time[1];
        delete param.time;
    }
    const res = await service.fund.fashionableCom(pageNum, pageSize, param);
    fund.value = res;
    cb(res.page);
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0);
    }, 0);
};

const showOrder = row => {
    router.push({ path: '/order/bfqzOrder/list', query: { orderId: row.orderId } });
};

const exportData = async query => {
    query = { ...query };
    if (query.time && query.time.length > 0) {
        query.startCreateTime = query.time[0];
        query.endCreateTime = query.time[1];
        delete query.time;
    }
    query.fileName = '账户流水.xlsx';
    const res = await service.fund.billExport(query);
    res && common.export(res, query.fileName);
};

const showApply = () => {
    if (!account.value) {
        ElMessage.warning('请先维护提现账户');
        return;
    }
    applyRef.value.open(account.value, fund.value.merchantTotalAmount);
};

getAccount();
</script>
<template>
    <section class="main-white" v-if="fund || true">
        <section class="flex-align marginB10">
            <!-- <el-card class="box-card">
                <div class="flex-align">
                    <div class="marginL20">
                        <div class="font6 color-1 bold">{{fund.balanceAmount}}</div>
                        <div class="color-2 marginT5">账户余额(元)</div>
                    </div>
                    <div class="paddingX30" :class="[premission.apply && fund.balanceAmount > 0 && 'border-right1']">
                        <div class="color-1">提现中：{{fund.frozenAmount}}</div>
                        <div class="color-2 flex-align-between marginT6">
                            <div class="color-theme underline cursor" v-if="premission.apply" @click="accountRef.open(account)">提现账户</div>
                            <div class="color-theme underline cursor marginL20" @click="router.push('/finance/withdraw/record')">提现记录</div>
                        </div>
                    </div>
                    <div class="paddingX30" v-if="premission.apply && fund.balanceAmount > 0">
                        <el-button type="primary" @click="showApply">提现</el-button>
                    </div>
                </div>
            </el-card> -->
            <div class="card">
                <span>账户余额</span>
                <span>提现中：{{ fund.merchantFreezeAmount }}</span>
                <span>¥{{ fund.merchantTotalAmount }}</span>
                <span v-if="premission.apply" @click="accountRef.open(account)">提现账户</span>
                <span @click="router.push('/wealth/withdraw/record')">提现记录</span>
                <span @click="showApply" v-if="premission.apply && fund.merchantTotalAmount > -10">提现</span>
            </div>
        </section>

        <search @export="exportData" :items="searchs" @filter="onSearch" />
        <page-wrapper @get-data="getData" ref="pageRef">
            <template v-slot:default="props">
                <vxe-table class="mytable-scrollbar" ref="tableRef" :loading="props.loading" :data="props.tableData.records" :max-height="common.tableHeight(true, 2, 100)" highlight-hover-row round stripe border>
                    <vxe-column type="seq" width="60"></vxe-column>
                    <vxe-column field="accountType" title="账户类型" width="200" />
                    <vxe-column field="balanceAmount" title="金额">
                        <template #default="{ row }">
                            <span :style="{ color: row.balanceType === 1 || row.balanceType === 4 ? 'green' : 'red' }">{{ row.balanceType === 1 || row.balanceType === 4 ? '+' : '-' }}{{ row.balanceAmount }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column field="afterBalanceAmount" title="交易后金额" />
                    <vxe-column field="balanceDirectionDesc" title="来源或去路">
                        <template #default="{ row }">
                            <span :style="{ color: row.balanceType === 1 || row.balanceType === 4 ? 'green' : 'red' }">
                                {{ balanceTypeDesc[row.balanceType] }}
                            </span>
                        </template>
                    </vxe-column>
                    <vxe-column field="balanceNo" title="流水号" width="200" />
                    <vxe-column field="bizTypeDesc" title="科目" />
                    <vxe-column title="相关订单号" width="160">
                        <template #default="{ row }">
                            <div class="color-theme underline cursor" @click="showOrder(row)">
                                {{ row.orderId }}
                            </div>
                        </template>
                    </vxe-column>
                    <vxe-column field="userName" title="用户姓名" />
                    <vxe-column field="createTime" title="生成时间" />
                </vxe-table>
            </template>
        </page-wrapper>
        <account-com ref="accountRef" @refresh="getAccount" />
        <apply ref="applyRef" />
    </section>
</template>
<style scoped lang="scss">
.card {
    width: 440px;
    height: 238px;
    border-radius: 15px;
    background-image: url(../../assets/image/card.png);
    background-size: 100% 100%;
    color: #fff;
    position: relative;
    span {
        position: absolute;
        font-family: PingFangSC-Regular, PingFang SC;
        font-size: 16px;
        height: 26px;
        line-height: 26px;
    }
    span:first-child {
        left: 44px;
        top: 21px;
        width: 80px;
        font-weight: 400;
    }
    span:nth-child(2) {
        left: 205px;
        top: 21px;
    }
    span:nth-child(3) {
        // width: 108px;
        left: 44px;
        top: 57px;
        height: 48px;
        font-size: 48px;
        font-family: DINCondensed-Bold, DINCondensed;
        font-weight: bold;
        line-height: 58px;
        letter-spacing: -2px;
    }
    span:nth-child(4) {
        left: 44px;
        top: 132px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        border-bottom: 1px solid #fff;
        cursor: pointer;
    }
    span:nth-child(5) {
        top: 132px;
        left: 235px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        border-bottom: 1px solid #fff;
        cursor: pointer;
    }
    span:nth-child(6) {
        top: 174px;
        left: 44px;
        width: 122px;
        height: 38px;
        line-height: 38px;
        background: #fff;
        color: #d22f1b;
        text-align: center;
        border-radius: 2px;
        cursor: pointer;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
    }
}
</style>
